<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script>
export default {
    name: 'App',
    mounted() {
        window.onresize = () => {
            return (() => {
                console.log(document.documentElement.clientWidth)
            })()
        }
    }
}
</script>

<style>
@import url('https://fonts.font.im/css?family=Poppins');

html,
body {
    scrollbar-width: none;
    font-family: 'Poppins', sans-serif;
}

.gap {
    width: 100%;
    height: 50px;
    contain: ' ';
}

.red {
    color: red;
}

#container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    height: 90vh;
    margin-top: 3vh;
}

#list {
    width: 50%;
    height: 97vh;
    overflow-y: scroll;
    scrollbar-width: none;
}

.item {
    padding-left: 20px;
}

.wrong-item {
    padding-left: 20px;
    margin-bottom: 10px;
}

#tip {
    width: 50%;
    text-align: center;
    padding-left: 20px;
    padding-top: 20px;
    font-size: 1.6em;
}

.come {
    animation-name: mycome;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes mycome {
    0% {
        width: 50%;
        line-height: 1em;
        font-size: 1em;
    }

    100% {
        width: 100%;
        line-height: 3em;
        font-size: 3em;
    }
}

.leave {
    animation-name: myleave;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes myleave {
    0% {
        width: 50%;
        heigth: 90vh;
    }

    59% {
        width: 1px;
        heigth: 90vh;
    }

    100% {
        width: 0px;
        height: 0vh;
    }
}

@media screen and (max-width: 560px) {
    #container {
        display: block;
    }

    #list {
        height: 70vh;
    }

    #list,
    #tip {
        width: 94%;
        padding: 5px 3%;
        text-align: left;
    }
}
</style>
